<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PDBe Molstar</title>

    <!-- Molstar CSS & JS -->
    <link rel="stylesheet" type="text/css" href="build/pdbe-molstar.css">
    <script type="text/javascript" src="build/pdbe-molstar-plugin.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 30px;
        }

        h2 {
            margin-bottom: 20px;
        }

        h3 {
            margin-bottom: 2px;
        }

        h4 {
            margin-top: 6px;
            margin-bottom: 2px;
        }

        h4:first-child {
            margin-top: 0px;
        }

        .content {
            display: flex;
            flex-wrap: wrap-reverse;
            gap: 30px;
        }

        .controlsSection {
            width: 300px;
        }

        .controlBox {
            border: 1px solid lightgray;
            padding: 10px;
            margin-bottom: 20px;
        }

        #myViewer {
            width: 450px;
            height: 450px;
            position: relative;
        }

        button {
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 1px;
            padding-inline: 4px;
        }

        button:last-child {
            margin-bottom: 0px;
        }
    </style>
</head>

<body>
    <h2>PDBe Molstar</h2>

    <div class="content">
        <div class="controlsSection">
            <h3>Canvas/ layout methods</h3>
            <div class="controlBox">
                <h4>Set Background</h4>
                <button onclick="viewerInstance.canvas.setBgColor('white')">White</button>
                <button onclick="viewerInstance.canvas.setBgColor('black')">Black</button>

                <h4>Toggle controls menu</h4>
                <button onclick="viewerInstance.canvas.toggleControls(false)">Hide</button>
                <button onclick="viewerInstance.canvas.toggleControls(true)">Show</button>
                <button onclick="viewerInstance.canvas.toggleControls()">Toggle</button>

                <h4>Toggle Fullscreen</h4>
                <button onclick="viewerInstance.canvas.toggleExpanded(true)">Show Fullscreen</button>
            </div>

            <h3>Visual Methods</h3>
            <div class="controlBox">
                <h4>Change representation visibility</h4>
                <button onclick="viewerInstance.visual.visibility({ water: false })">Hide Water Visual</button>
                <button onclick="viewerInstance.visual.visibility({ water: true })">Show Water Visual</button>

                <h4>Toggle Spin</h4>
                <button onclick="viewerInstance.visual.toggleSpin(true)">Rotate</button>
                <button onclick="viewerInstance.visual.toggleSpin(false)">Stop</button>
                <button onclick="viewerInstance.visual.toggleSpin()">Toggle</button>

                <h4>Focus</h4>
                <button onclick="viewerInstance.visual.focus([{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }])">
                    Focus on Chain A:14-18
                </button>

                <h4>Interactivity focus</h4>
                <button onclick="viewerInstance.visual.interactivityFocus({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }] });">
                    Int. focus on Chain A:14-18
                </button>
                <button onclick="viewerInstance.visual.interactivityFocus({ data: [] });">
                    Int. unfocus
                </button>

                <h4>Highlight</h4>
                <button onclick="viewerInstance.visual.highlight({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }], color: '#ffff00' })">
                    Highlight Chain A:14-18
                </button>
                <button onclick="viewerInstance.visual.clearHighlight()">
                    Clear Highlight
                </button>

                <h4>Selection</h4>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'A', color: '#ffff00', focus: true }] })">
                    Select & Focus on Chain A
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', color: '#ffff00', focus: true }]})">
                    Select & Focus on Chain B
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00' }]})">
                    Select Chain B:1-6
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [
                        { struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00' }, 
                        { struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: '#88ff00' }]})">
                    Select Chain B:1-6, B:15-20
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [
                        { struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00', sideChain: true }, 
                        { struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: '#88ff00', representation: 'spacefill', representationColor: '#ff00ff' }]})">
                    Select Chain B:1-6, B:15-20, with representations
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ uniprot_accession: 'P02070', start_uniprot_residue_number: 122, end_uniprot_residue_number: 142, color: '#ff00ff' }], nonSelectedColor: '#ffffff' })">
                    Select Uniprot
                </button>
                <br>
                <button onclick="viewerInstance.visual.clearSelection()">
                    Clear Selection
                </button>

                <h4>Set highlight / selection colour</h4>
                <button onclick="viewerInstance.visual.setColor({ highlight: '#ffff00' })">
                    Yellow highlight
                </button>
                <button onclick="viewerInstance.visual.reset({ highlightColor: true })">
                    Reset
                </button>
                <br>
                <button onclick="viewerInstance.visual.setColor({ select: '#ff0000' })">
                    Red selection
                </button>
                <button onclick="viewerInstance.visual.reset({ selectColor: true })">
                    Reset
                </button>

                <h4>Custom tooltips</h4>
                <button onclick="viewerInstance.visual.tooltips({ data: [
                        { struct_asym_id: 'A', tooltip: 'Custom tooltip for chain A' }, 
                        { struct_asym_id: 'B', tooltip: 'Custom tooltip for chain B' }, 
                        { struct_asym_id: 'C', tooltip: 'Custom tooltip for chain C' }, 
                        { struct_asym_id: 'D', tooltip: 'Custom tooltip for chain D' }, 
                    ] });">
                    Add tooltips
                </button>
                <button onclick="viewerInstance.visual.clearTooltips();">
                    Clear
                </button>

                <h4>Reset Visual</h4>
                <button onclick="viewerInstance.visual.reset({ camera: true })">
                    Camera
                </button>
                <button onclick="viewerInstance.visual.reset({ theme: true })">
                    Theme
                </button>
                <button onclick="viewerInstance.visual.reset({ camera: true, theme: true })">
                    Camera & Theme
                </button>

                <h4>Update data</h4>
                <button onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, false)">
                    Update (add)
                </button>
                <button onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, true)">
                    Update (replace)
                </button>
            </div>

            <h3>Extensions</h3>
            <div class="controlBox">
                <h4>Interaction extension</h4>
                <button onclick="PDBeMolstarPlugin.extensions.Interactions.loadInteractions_example(viewerInstance)">Show interactions (1hda)</button>
                <button onclick="PDBeMolstarPlugin.extensions.Interactions.clearInteractions(viewerInstance)">Clear</button>

                <h4>MolViewSpec</h4>
                <button onclick="
                    const builder = PDBeMolstarPlugin.extensions.MVS.MVSData.createBuilder();
                    builder.canvas({ background_color: '#110044' }).download({ url: 'https:/\/www.ebi.ac.uk/pdbe/entry-files/download/2e2n.bcif' }).parse({ format: 'bcif' }).modelStructure().component().representation().color({ color: '#adb0e6', selector: { label_asym_id: 'A' } });
                    const state = builder.getState({ description: 'Example MVS state' });
                    PDBeMolstarPlugin.extensions.MVS.loadMVS(viewerInstance.plugin, state);">
                    Load MVS
                </button>
            </div>

            <div>
                <h3>Options</h3>
                <div class="controlBox">
                    <pre id="options"></pre>
                </div>
            </div>
        </div>

        <div class="viewerSection">
            <h3>PDBe Mol* JS Plugin Demo</h3>
            <!-- Molstar container -->
            <div id="myViewer"></div>
        </div>
    </div>


    <script>
        function getJsonParam(paramName) {
            const paramString = new URL(window.location).searchParams.get(paramName);
            const param = JSON.parse(paramString);
            return param ?? undefined;
        }
        /** Load CSS with a different skin (theme) */
        function loadSkin(skin) {
            if (skin) {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = `build/pdbe-molstar-${skin}.css`;
                document.getElementsByTagName('head')[0].appendChild(link);
            }
        }

        // Create plugin instance
        const viewerInstance = new PDBeMolstarPlugin();

        // Set default options (Checkout available options list in the documentation)
        const defaultOptions = {
            moleculeId: '1hda',
            // expanded: true,
            // loadMaps: true,
            // bgColor: 'white',
            // hideControls: true,
            // domainAnnotation: true,
            // validationAnnotation: true,
            // symmetryAnnotation: true,
            // subscribeEvents: true,
            // loadingOverlay: true,
            // hideCanvasControls: ['expand', 'selection', 'animation', 'controlToggle', 'controlInfo']
        };
        const options = { ...defaultOptions, ...getJsonParam('options') };

        const optionsDiv = document.getElementById('options');
        optionsDiv.innerHTML = JSON.stringify(options, undefined, 2).replace(/"(\w+)":/g, '$1:');

        // Get element from HTML/Template to place the viewer 
        const viewerContainer = document.getElementById('myViewer');

        // Call render method to display the 3D view
        viewerInstance.render(viewerContainer, options);

        const selectData = getJsonParam('select');
        if (selectData) {
            viewerInstance.events.loadComplete.subscribe(() => viewerInstance.visual.select(selectData));
        }

        loadSkin(getJsonParam('skin'));

        const size = getJsonParam('size');
        if (size) viewerContainer.setAttribute('style', `width: ${size[0]}px; height: ${size[1]}px;`);

        // document.addEventListener('PDB.molstar.mouseover', (e) => { 
        //   //do something on event
        //   console.log(e)
        // });

    </script>
</body>

</html>